import React, { Component } from 'react'
import axios from 'axios'
import './index.css'
export default class Search extends Component {
  search=()=>{
    // const {element}=this
    // const {value}=element
    // const keyWord=value
    //上面等同于const {element:{value:keyWord}}=this
    const {element:{value:keyWord}}=this
    if(!keyWord.trim()) return
    this.props.changeAppState({isLoading:true})
    axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(res=>{
      const arr=res.data.items.length>=31?res.data.items.slice(0,31):res.data.items
      // this.props.getUsers(arr)
      this.props.changeAppState({isLoading:false,requestList:arr})
    },
    error=>{
      console.log(error);
      this.props.changeAppState({err:error.message,isLoading:false})
    }
    )
  }
  render() {
    return (
      <div className='search'>
        <input type="text" ref={c=>this.element=c} />
        <button onClick={this.search}>Search</button>
      </div>
    )
  }
}
